{include file="public/header" /}
<style type="text/css">
    .uploader-list {

        margin-left: -15px;

    }



    .uploader-list .info {

        position: relative;

        margin-top: -25px;

        background-color: black;

        color: white;

        filter: alpha(Opacity=80);

        -moz-opacity: 0.5;

        opacity: 0.5;

        width: 100px;

        height: 25px;

        text-align: center;

        display: none;

    }



    .uploader-list .handle {

        position: relative;

        background-color: black;

        color: white;

        filter: alpha(Opacity=80);

        -moz-opacity: 0.5;

        opacity: 0.5;

        width: 100px;

        text-align: right;

        height: 18px;

        margin-bottom: -18px;

        display: none;

    }

    .layui-table td,
    .layui-table th {
        min-width: 100px !important;
    }

    .uploader-list .handle i {

        margin-right: 5px;

    }

    .uploader-list .handle i:hover {

        cursor: pointer;

    }

    .uploader-list .file-iteme {

        margin: 12px 0 0 15px;

        padding: 1px;

        float: left;

    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-card layui-form">
                    <div class="layui-card-header">商品规格</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="specid" lay-verify="" lay-filter="classid">
                                <option value="">请选择商品规格</option>
                                {foreach $row as $v}
                                <option value="{$v.id}" {if !empty($row.specid) && $row.specid==$v.id}selected{/if}>
                                    {$v.name|default=''}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">发布人昵称</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="text" name="nickName" required="" autocomplete="off" class="layui-input"
                                value="{$row.nickName|default=''}" placeholder="">
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">发布人头像</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <input type="hidden" value="{$row.url|default=''}" name="avatarUrl" id="covers">
                                    <img class="layui-upload-img" id="demo1" src="{$row.url|default=''}"
                                        style="width: 200px;height: auto;">
                                </div>
                                <div class="layui-progress layui-progress-big" lay-showpercent="true"
                                    lay-filter="component-progress-demo">
                                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">评价星级</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <select name="star">
                                <option value="">请选择评价星级</option>
                                <option value="5">5星</option>
                                <option value="4">4星</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">评论内容</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <textarea name="text" class="layui-textarea" placeholder="请填写评论内容"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">评论图片</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal  layui-btn-sm"
                                    id="test2">图片上传</button>
                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                                    预览图：
                                    <div class="layui-upload-list uploader-list" style="overflow: auto;"
                                        id="uploader-list">
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card layui-form" lay-filter="component-form-element">
                    <div class="layui-card-header">日期</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="text" id="test15" name="created" required="" autocomplete="off"
                                class="layui-input" value="{$row.created|default=''}" placeholder="">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" value="{$row.id|default=''}" name="id">
                    <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
                </div>
            </form>
        </div>
    </div>

    {include file="public/footer" /}
    <script src="/static/leyedit/Layui-KnifeZ/layui.all.js"></script>
    <script src="/static/leyedit/ace/ace.js"></script>
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test15' //指定元素
                , type: 'datetime'
            });
        });
    </script>
    <script>
        // 删除图片
        $(document).on("click", ".file-iteme .handle", function (event) {
            $(this).parent().remove();
        });
        $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
            if (event.type === "mouseenter") {
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            } else if (event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });
        layui.use(['layer', 'jquery', 'form', 'upload', 'table'], function () {
            $ = layui.jquery;
            var form = layui.form
                , upload = layui.upload
                , layer = layui.layer;
            //图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/base/upload_img'
                , accept: 'images'
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(); //上传loading
                }, progress: function (n, elem, res, index) {
                    element.progress('component-progress-demo', n + '%');
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.status == 1) {
                        layer.closeAll('loading'); //关闭loading
                        return layer.msg('图片上传失败，请重试');
                    }
                    if (res.status == 0) {
                        //上传成功
                        $('#demo1').attr('src', res.data.src); //图片链接（base64）
                        $('#covers').val(res.data.src);
                        layer.closeAll('loading'); //关闭loading
                        return layer.msg('图片上传成功');
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                    layer.closeAll('loading'); //关闭loading
                }
            });
            var demoListView = $('#demoList'),
                uploadListIns = upload.render({
                    elem: '#test2'
                    , url: '/Base/upload_img'
                    , multiple: true
                    , before: function (obj) {
                        layer.msg('图片上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 0
                        })
                    }
                    , done: function (res) {
                        if (res.status == 0) {
                            //上传完毕
                            $('#uploader-list').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                                '<img style="width: 100px;height: 100px;" src=' + res.data.src + '>' +
                                '<input type="hidden" name="images[]" value="' + res.data.src + '"></div>'
                            );
                        }
                        layer.close(layer.msg());//关闭上传提示窗口
                    }
                });
            //监听提交
            form.on('submit(add)', function (data) {
                $.ajax({
                    type: 'post',
                    data: data.field,
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });
        });
    </script>

</body>

</html>